<template>
  <div class="merge-check">
    <c-section title="合并前验收任务">
      <c-table-box hide-func :data="mergeTableData" :table-config="mergeTableConfig" />
    </c-section>
    <c-section title="门店建设基本信息">
      <c-list ref="form" :column="3" :model="formData" :rules="formRules" label-width="120px">
        <c-list-item label="门店建设项目号" :value="detail.constCode" />
        <c-list-item label="验收类型" dict-type-code="ACCEPT_TYPE" :value="detail.acceptType" />
        <c-list-item label="所属门店编码" :value="detail.shopCode" />
        <c-list-item label="所属门店" :value="detail.shopName" />
        <c-list-item label="所属客户编码" :value="detail.clientCode" />
        <c-list-item label="所属客户" :value="detail.clientName" />
        <c-list-item label="所属办事处" :value="detail.officeName" />
        <c-list-item label="门店城市级别" dict-type-code="CITY_LEVEL" :value="detail.shopCityLevel" />
        <c-list-item label="门店详细地址" :value="detail.shopAddress" :span="2" />
        <c-list-item label="门店经营面积" suffix="m²" :value="detail.shopArea || 0" />
        <c-list-item label="报图类型" dict-type-code="MARKET_TYPE" :value="detail.marketType" />
        <c-list-item label="门店建设类型" dict-type-code="CONST_TYPE" :value="detail.constType" />
        <c-list-item label="商家类别" dict-type-code="BIZMAN_TYPE" :value="detail.bizmanType" />
        <c-list-item label="装修形式" dict-type-code="DECORATION_FORM" :value="detail.decorationFormCal || detail.decorationForm" />
        <c-list-item label="门店建设范围" dict-type-code="DECORATION_RANGE" :value="detail.decorationRange" />
        <c-list-item label="工程监理" prop="proSupervisorCode">
          <c-single-dialog
            ref="proSupervisorCode"
            v-model="formData.proSupervisorCode"
            :label.sync="formData.proSupervisorName"
            :props="{label:'userName',value:'account'}"
            :focus-query="true"
            :multiple="false"
            :config="{
              title:'工程监理',
              width:'600px',
              interfacePath:`/slm-admin/api/v1/user/listUsers`,
              method:'post',
              filtersRaw:[],
              paramsRaw:{},
              setting:[
                {prop:'account',title:'编码',width:80},
                {prop:'userName',title:'名称',width:200}
              ]
            }"
            @change="changeData1"
          />
        </c-list-item>
        <c-list-item label="工程监理部门">
          {{ orgInfo1 }}
        </c-list-item>
        <c-list-item label="形象督导" prop="formSupervisorCode">
          <c-single-dialog
            ref="formSupervisorCode"
            v-model="formData.formSupervisorCode"
            :label.sync="formData.formSupervisorName"
            :props="{label:'userName',value:'account'}"
            :focus-query="true"
            :multiple="false"
            :config="{
              title:'形象督导',
              width:'600px',
              interfacePath:`/slm-admin/api/v1/user/listUsers`,
              method:'post',
              filtersRaw:[],
              paramsRaw:{},
              setting:[
                {prop:'account',title:'编码',width:80},
                {prop:'userName',title:'名字',width:150},
                {prop: 'phone', title: '电话', width: 150}
              ]
            }"
            @change="changeData2"
          />
        </c-list-item>
        <c-list-item label="形象督导部门">
          {{ orgInfo2 }}
        </c-list-item>
        <template v-if="detail.haveFrock === 1 || detail.haveFrock === '1'">
          <c-list-item label="施工单位" prop="constUnitCode">
            <c-single-dialog
              ref="constUnitCode"
              v-model="formData.constUnitCode"
              :label.sync="formData.constUnitName"
              :props="{label:'unitName',value:'unitCode'}"
              :focus-query="true"
              :multiple="false"
              :config="{
                title:'施工单位',
                width:'600px',
                interfacePath:'/slm-admin/api/v1/shopDecoration/pageUnitPupSelect',
                method:'post',
                filtersRaw:filtersRaw,
                paramsRaw:{schedule: 'L'},
                setting:[
                  {prop:'unitCode',title:'编码',width:80},
                  {prop:'unitName',title:'名称',width:200}
                ]
              }"
              @change="changeHandle"
            />
          </c-list-item>
        </template>
        <c-list-item v-if="formData.constUnitCode" label="施工单位负责人" :value="formData.principal" />
        <!-- <c-list-item label="预计验收申请提报时间" :value="detail.expectAcceptApplyReportTim" /> -->
        <c-list-item label="是否含公装" dict-type-code="BOOLEANS" :value="detail.haveFrock" />
        <c-list-item label="装修范围" dict-type-code="DECORATION_RANGE" :value="detail.range" />
      </c-list>
    </c-section>
    <c-section title="关联装修数据">
      <c-table-box hide-func :data="tableData" :table-config="tableConfig" />
    </c-section>
    <div class="btn-container">
      <c-button @click="cancelHandle">取消</c-button>
      <c-button type="primary" @click="submitHandle">确认</c-button>
    </div>
  </div>
</template>
<script>
import { postMergeTaskSelect, postMergeTaskSubmit, postSelectPage } from '@/api/check'
import { otherFiltersItem } from '@/utils'
import { getOrgByAccount } from '@/api/common'

export default {
  name: 'CheckHardMerge',
  data() {
    return {
      orgInfo1: '',
      orgInfo2: '',
      detail: {},
      mergeTableData: [],
      mergeTableConfig: {
        interfacePath: '',
        setting: [
          {
            prop: 'constCode',
            label: '门店建设项目号',
            width: 180
          },
          {
            prop: 'acceptTaskCode',
            label: '验收任务号',
            minWidth: 160
          },
          {
            prop: 'acceptType',
            label: '验收类型',
            minWidth: 120,
            propEnum: {
              appCode: 'slm',
              domainCode: 'marketing',
              dictTypeCode: 'ACCEPT_TYPE'
            }
          },
          {
            prop: 'shopName',
            label: '所属门店',
            minWidth: 140
          },
          {
            prop: 'clientName',
            label: '所属客户',
            minWidth: 140
          },
          {
            prop: 'officeName',
            label: '所属办事处',
            minWidth: 160
          },
          {
            prop: 'range',
            label: '装修范围',
            minWidth: 120,
            render(h, row) {
              return h('c-dict-range-view', {
                props: {
                  dictTypeCode: 'DECORATION_RANGE',
                  value: row.range
                }
              })
            }
          },
          {
            prop: 'constUnitName',
            label: '施工单位',
            minWidth: 120
          },
          {
            prop: 'principal',
            label: '施工负责人',
            minWidth: 130
          },
          {
            prop: 'proSupervisorName',
            label: '工程监理',
            minWidth: 120
          },
          {
            prop: 'formSupervisorName',
            label: '形象督导',
            minWidth: 120
          },
          {
            prop: 'marketType',
            label: '报图类型',
            minWidth: 120,
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'MARKET_TYPE'
            }
          },
          {
            prop: 'constType',
            label: '门店建设类型',
            minWidth: 140,
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'CONST_TYPE'
            }
          }
        ]
      },
      formData: {
        proSupervisorCode: '',
        proSupervisorName: '',
        formSupervisorCode: '',
        formSupervisorName: '',
        constUnitCode: '',
        constUnitName: '',
        principal: ''
      },
      formRules: {
        proSupervisorCode: [{ required: true, message: '请选择工程监理', trigger: 'change' }],
        formSupervisorCode: [{ required: true, message: '请选择形象督导', trigger: 'change' }],
        constUnitCode: [{ required: true, message: '请选择施工单位', trigger: 'change' }]
      },
      tableConfig: {
        interfacePath: '',
        setting: [
          {
            prop: 'decorationTaskCode',
            width: 200,
            label: '装修任务号'
          },
          {
            prop: 'nature',
            label: '装修性质',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'DECORATION_NATURE'
            }
          },
          {
            prop: 'actualApproachTime',
            label: '装修进场时间',
            formatData: this.$parseTimeYMD('actualApproachTime')
          },
          {
            prop: 'actualEndTime',
            label: '装修完工时间',
            formatData: this.$parseTimeYMD('actualEndTime')
          },
          {
            prop: 'range',
            label: '装修范围',
            render(h, row) {
              return h('c-dict-range-view', {
                props: {
                  dictTypeCode: 'DECORATION_RANGE',
                  value: row.range
                }
              })
            }
          },
          {
            prop: 'shopWholeTotalArea',
            label: '对应整装图纸总面积'
          },
          {
            prop: 'shopSimpleTotalArea',
            label: '对应简装图纸总面积'
          },
          {
            prop: 'softwearTaskCode',
            label: '对应软装陈列任务号'
          }
        ]
      },
      tableData: []
    }
  },
  computed: {
    filtersRaw() {
      const constUnitCodes = this.mergeTableData.map(e => {
        return e.constUnitCode
      })
      return [otherFiltersItem('unitCode', `[${constUnitCodes.join(',')}]`, 'in')]
    } // 限制施工单位查询范围
  },
  created() {
    this.getDetail()
  },
  methods: {
    changeData1(data) {
      getOrgByAccount(data.account).then(res => {
        if (res.success === 1) {
          if (res.data.length !== 0) {
            const list = res.data.map(el => el.orgName)
            this.orgInfo1 = list.join(',')
          } else {
            this.orgInfo1 = ''
          }
        }
      })
    },
    changeData2(data) {
      getOrgByAccount(data.account).then(res => {
        if (res.success === 1) {
          if (res.data.length !== 0) {
            const list = res.data.map(el => el.orgName)
            this.orgInfo2 = list.join(',')
          } else {
            this.orgInfo2 = ''
          }
        }
      })
    },
    getDetail() {
      const ids = this.$route.query.ids.split(',')
      postMergeTaskSelect(ids).then(res => {
        this.detail = res.data
        this.tableData = this.detail.shopDecorationList || []
      })
      postSelectPage(ids).then(res => {
        this.mergeTableData = res || []
        if (this.mergeTableData.length > 0) {
          'proSupervisorCode'
          for (const item of this.mergeTableData) {
            if (!this.formData.proSupervisorCode && item.proSupervisorCode) {
              this.$set(this.formData, 'proSupervisorCode', item.proSupervisorCode)
              this.$set(this.formData, 'proSupervisorName', item.proSupervisorName)
            }
            if (!this.formData.formSupervisorCode && item.formSupervisorCode) {
              this.$set(this.formData, 'formSupervisorCode', item.formSupervisorCode)
              this.$set(this.formData, 'formSupervisorName', item.formSupervisorName)
            }
            if (!this.formData.constUnitCode && item.constUnitCode) {
              this.$set(this.formData, 'constUnitCode', item.constUnitCode)
              this.$set(this.formData, 'constUnitName', item.constUnitName)
            }
          }
        }
      })
    },
    cancelHandle() {
      this.$store.dispatch('views/goFirst')
    },
    changeHandle(v) {
      this.$set(this.formData, 'principal', v.principal || '')
    },
    submitHandle() {
      return this.$refs.form.validate().then(() => {
        const data = {
          ...this.detail,
          ...this.formData,
          applyInformantCode: this.$store.getters.currUser.account,
          applyInformantName: this.$store.getters.currUser.userName,
          applyReportTime: this.$parseTime(new Date())
          // shopAcceptDTOList: this.mergeTableData.map(e => {
          //   return { id: e.id }
          // }),
          // shopDecorationList: this.tableData.map(e => {
          //   return { id: e.id }
          // })
        }
        data.shopAcceptDTOList = this.mergeTableData
        return postMergeTaskSubmit(data).then(res => {
          this.$message.success('操作成功！')
          this.cancelHandle()
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.merge-check{

}
</style>
